<template>
	<view class="">

		<view class="topTitle">
			<Total title="运动健身"></Total>
		</view>
		<view class="boxAll">
			<HappyTypeVue :goodsList="goodsList" :options1="options1" :options2="options2" :options3="options3"
			@getFilterList="getFilterList"></HappyTypeVue>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import Total from "../../Totle.vue";
	import HappyTypeVue from "../componte/HappyType.vue";
	import {
		get_shops_list
	} from "../../../../api/api";


	//商铺筛选点
	const options1 = ref([{
			label: "附近",
			value: "0-1KM"
		},
		{
			label: "1-2KM",
			value: "1-2KM"
		},
		{
			label: "2-3KM",
			value: "2-3KM"
		},
		{
			label: "3-5KM",
			value: "3-5KM"
		},
		{
			label: "5KM以上",
			value: "5-9999999999KM以上"
		}
	]);

	const options2 = ref([{
			label: "不限",
			value: "不限"
		},
		{
			label: "杂货",
			value: "杂货"
		},
		{
			label: "娱乐",
			value: "娱乐"
		},
		{
			label: "美食",
			value: "美食"
		},
		{
			label: "旅游",
			value: "旅游"
		},
		{
			label: "医疗",
			value: "医疗"
		},
		{
			label: "服务",
			value: "服务"
		},
		{
			label: "健身",
			value: "健身"
		},
		{
			label: "亲子",
			value: "亲子"
		}
	]);

	const options3 = ref([{
			label: "智能排序",
			value: "智能排序"
		},
		{
			label: "热门排序",
			value: "热门排序"
		},
		{
			label: "销量排序",
			value: "销量排序"
		},
		{
			label: "价格排序",
			value: "价格排序"
		}
	]);

	//获取到子组件的数据
	const getFilterList = (valueA, valueB, valueC) => {
		value1.value = valueA;
		value2.value = valueB;
		value3.value = valueC;
		getGoodsList();
	};

	const props = defineProps();

	const goodsList = ref([]);
	const getshopList = async () => {
		const res = await get_shops_list({
			type: props.type
		});
		goodsList.value = res.data;
	};


	onMounted(() => {
		getshopList();
	});
</script>

<style lang="scss" scoped>
	.topTitle {
		//置顶
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}
	.boxAll {
		margin-top: 100rpx;
	}
</style>